<template>
	<div class="statistic-index">
		<div class="top-race-search-wrapper">
			<div class="current-race">当前赛事：{{raceObject[currentRace]}}</div>
			<div style="display: flex;align-items: center;">
				<el-select size="small" style="width: 300px;margin-right: 10px;" v-model="currentRace" placeholder="请选择统计赛事">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-button size="small" type="success" @click="go2Query">刷新</el-button>
			</div>
		</div>
		<el-divider></el-divider>
		<div class="top-statistic-wrapper">
			<el-row :gutter="20">
				<el-col :span="8">
					<div>
						<el-statistic group-separator="," :value="statistic.signUpTodayTotal" title="当天新增报名用户">
							<template slot="title">
								<span style="font-weight: bolder;font-size: 16px;">当天新增报名用户</span>
							</template>
						</el-statistic>
					</div>
				</el-col>
				<el-col :span="8">
					<div>
						<el-statistic title="报名男女比例">
							<template slot="formatter"> {{statistic.signUpManTotal}}/{{statistic.signUpWomenTotal}} </template>
							<template slot="title">
								<span style="font-weight: bolder;font-size: 16px;">报名男女比例</span>
							</template>
						</el-statistic>
					</div>
				</el-col>
				<el-col :span="8">
					<div>
						<el-statistic group-separator="," :value="statistic.signUpTotal" title="报名用户">
							<template slot="title">
								<span style="font-weight: bolder;font-size: 16px;">报名用户</span>
							</template>
						</el-statistic>
					</div>
				</el-col>
			</el-row>
		</div>
		<el-divider></el-divider>
		<div class="statistic-chart-wrapper">
			<el-row :gutter="20">
				<el-col :span="12">
					<div class="statistic-chart-item-wrapper">
						<div class="statistic-chart-item-title">
							分组用户统计
						</div>
						<div class="statistic-chart-item-chart">
							<test1 :chartData="groupChartData"></test1>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="statistic-chart-item-wrapper">
						<div class="statistic-chart-item-title">
							用户年龄分布
						</div>
						<div class="statistic-chart-item-chart">
							<test2 :chartData="ageChartData"></test2>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="race-org-statistic-wrapper">
			<div class="race-org-label">赛事机构统计</div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="name" label="机构名称">
					<template slot-scope="scope">
						{{scope.row.name ? scope.row.name : "--"}}
					</template>
				</el-table-column>
				<el-table-column prop="signUpTotal" label="报名用户数">
				</el-table-column>
				<el-table-column prop="signUpManTotal" label="报名男生数">
				</el-table-column>
				<el-table-column prop="signUpWomenTotal" label="报名女生数">
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import {
		fetchRaceList
	} from '@/api/meiyu/race.js'
	import {
		raceStatistic,
		raceOrgStatistic,
		raceGroupStatistic,
		raceAgeStatistic
	} from '@/api/meiyu/statistic.js'

	import test1 from "./echarts/test1.vue"
	import test2 from "./echarts/test2.vue"

	export default {
		components: {
			test1,
			test2
		},
		data() {
			return {
				currentRace: "",
				options: [],
				raceObject: {},
				tableData: [],
				statistic: {},
				groupChartData: {},
				ageChartData: {}
			}
		},
		mounted() {
			this.go2Query()
		},
		methods: {
			go2Query() {
				const loading = this.$loading({
					lock: true,
					text: '加载中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
				const params = {
					page_no: 1,
					page_size: 100000,
				}
				fetchRaceList(params).then((res) => {
					loading.close()
					if (res.code === 200) {
						const message = res.data
						this.options = message.items.map(item => {
							return {
								label: item.name,
								value: item.id
							}
						})
						message.items.forEach(item => {
							this.raceObject[item.id] = item.name
						})
						this.currentRace = this.options[0].value
						this.go2QueryOrg()
						this.go2QueryTop()
						this.go2QueryGroup()
						this.go2QueryAge()
					}
				}).catch((error) => {
					loading.close()
					console.log(error)
				})
			},
			go2QueryOrg() {
				const params = {
					page_no: 1,
					page_size: 100000,
					race_id: this.currentRace
				}
				raceOrgStatistic(params).then((res) => {
					console.log("res", res)
					this.tableData = res
				}).catch((error) => {
					console.log(error)
				})
			},
			go2QueryTop() {
				raceStatistic(this.currentRace).then((res) => {
					console.log("raceStatistic", res)
					this.statistic = res
				}).catch((error) => {
					console.log(error)
				})
			},
			go2QueryGroup() {
				raceGroupStatistic(this.currentRace).then((res) => {
					console.log("raceGroupStatistic", res)
					this.groupChartData = {
						xData: res.map(item => {
							return item.name
						}),
						yData: res.map(item => {
							return item.signUpTotal
						})
					}
				}).catch((error) => {
					console.log(error)
				})
			},
			go2QueryAge() {
				raceAgeStatistic(this.currentRace).then((res) => {
					console.log("raceAgeStatistic", res)
					this.ageChartData = {
						xData: res.map(item => {
							return item.name
						}),
						yData: res.map(item => {
							return {
								name:  item.name,
								value:  item.signUpTotal
							}
						})
					}
				}).catch((error) => {
					console.log(error)
				})
			},
		}
	}
</script>

<style lang="scss">
	.statistic-index {
		.top-race-search-wrapper {
			margin-top: 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20px;
		}

		.current-race {
			font-size: 16px;
			font-weight: bolder;
		}

		.top-statistic-wrapper {
			margin-top: 20px;
		}

		.statistic-chart-wrapper {
			margin-top: 20px;
		}

		.statistic-chart-item-wrapper {
			text-align: center;
		}

		.statistic-chart-item-title {
			font-size: 16px;
			font-weight: 500;
		}

		.statistic-chart-item-chart {
			height: 280px;
			width: 100%;
			padding: 10px 20px;
		}

		.race-org-statistic-wrapper {
			margin-top: 20px;
			padding: 10px 20px;
		}

		.race-org-label {
			font-size: 16px;
			font-weight: 600;
			margin-bottom: 20px;
		}
	}
</style>